<template>
<div class="header">
  <div class="h-left">
    <router-link to="/city">
    <span>{{this.address}}</span>
    <span class="iconfont">&#xe651</span>
    </router-link>
  </div>
  <div class="h-center">
    <div class="search">

    <span class="iconfont">&#xe6a2</span>
    <span>请输入商家名，品类和商圈</span>
  </div>
  </div>
  <div class="h-right">
     <span class="iconfont">
    <router-link to="/login">
     &#xe63d
    </router-link>
     </span>
  </div>
</div>
</template>

<script>
  import {mapState} from 'vuex'
    export default {
        name: "Header",
      computed:{
          ...mapState(['address'])
      }



    }
</script>

<style lang="stylus" scoped>
  .header
    background-image linear-gradient(135deg, #FFD000 0%, #FFBD00 100%)
    height .5rem
    display flex
    font-size .14rem
    line-height .5rem
    text-align center
  .h-left
    flex 2
  .h-center
    flex 6
  .search
    height .4rem
    background-color #ffffff
  .h-right
    flex 1
  span
    font-size .2rem

</style>
